import React, { useState, useEffect } from 'react';
import { Dialog, Button, Message } from '@alifd/next';
import { t } from '@lingui/macro';
import { observable } from 'mobx';
import { observer } from 'mobx-react-lite';
import { useStore } from '@/hooks';

const SuperAddition = ({ modal, activityInfo, commandCode, onCancel }) => {
  const { sceneStore: store } = useStore();
  const [code, setCode] = useState(null);
  const dialog = modal;

  useEffect(() => {
    setCode(commandCode);

    return () => {
      setCode(null);
    };
  }, [commandCode]);

  const handleClickAndCopy = async () => {
    try {
      await navigator.clipboard.writeText(code);
      Message.success({ content: t`已复制！` });
    } catch (err) {
      console.error('文本复制失败: ', err);
    }
  };

  return (
    <Dialog
      v2
      title={t`【${activityInfo?.sceneName}】指令代码`}
      visible={dialog[0] === 'command'}
      onClose={onCancel}
      style={{ width: 350, marginTop: '10%' }}
      footer={[
        <Button style={{ marginLeft: 10 }} onClick={onCancel} type="normal">{t`取消`}</Button>,
      ]}
    >
      <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', fontSize: 16, fontWeight: 500 }}>
        <span>{t`指令码：`}</span><span>{code}</span><Button text style={{ marginLeft: 10 }} onClick={handleClickAndCopy} type="primary">{t`点击复制`}</Button>
      </div>
    </Dialog>
  );
};

export default observer(SuperAddition);
